<template name="drivers">
	<view :style="$s.view_color">
		<view class="place-order-extra-drivers">
			<view class="drivers-header">
				<text class="title">{{name_title}}信息</text>
				<text class="add" @click="selectDrivers" v-if="isSelect">选择</text>
				<text class="no-select" v-if="!isSelect">（不可修改）</text>
			</view>
			<view class="row" v-if="tenant.id>0">
				<text class="label">{{tenant.realname}}</text>
				<view class="flex"></view>
				<text class="value">{{tenant.mobile}}</text>
			</view>
<!-- 					<view class="row amount">
				<text class="label">title</text>
				<view class="flex"></view>
				<text class="desc">desc</text>
				<text class="value">amount元</text>
			</view> -->
		</view>
		
		<u-popup :show="drivers_pop" @close="drivers_pop=false" :closeable="true" mode="bottom" :round="10">
			<view class="driver-box">
				<view class="dr-hear">
					<text>常用{{name_title}}</text>
				</view>
				<scroll-view :scrollX="false" :scrollY="true">
					<u-radio-group v-model="driver_index" shape="circle" :activeColor="$s.theme">
					<view class="dr-list">
						<block v-for="(item,index) in driver_list" :key="index">
						<view class="dr-item" :class="driver_index==index?'in':''">
							<view class="dr-radio" @click="driver_index=index">
								<u-radio :name="index"></u-radio>
							</view>
							<view class="dr-info" @click="cutDriverPop(item)">
								<view class="info-name">{{item.realname}}</view>
								<view class="info-box">
									<view>
										<view>电话号码</view>
										<view>{{item.mobile}}</view>
									</view>
									<view>
										<view>是否默认</view>
										<view>{{item.is_default===1?"是":"否"}}</view>
									</view>
								</view>
							</view>
							<view class="dr-delete" @click="deleteDriver(item.id)">
								<u-icon name="close-circle" size="20" color="#909399"></u-icon>
							</view>
						</view>
						</block>
					</view>
					</u-radio-group>
				</scroll-view>
				<view class="dr-foot">
					<view>
						<button class="my-but-primary" @click="confirm">确定</button>
					</view>
					<view>
						<button class="but-warning" @click="cutDriverPop(null)">添加{{name_title}}</button>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="add_pop" @close="closeDriverUpPop" :closeable="true" mode="bottom" :round="10">
			<view class="pop-title">{{add_action?"添加":"修改"}}常用{{name_title}}</view>
			<view class="pop-box" :style="'height:'+ pop_height">
				<u-cell  title="真实姓名">
					<view slot="value">
						<input v-model="driver_data.realname" class="form-input" placeholder="真实姓名"/>
					</view>
				</u-cell>
				<u-cell  title="身份证号">
					<view slot="value">
						<input v-model="driver_data.id_code" class="form-input" placeholder="身份证号码"/>
					</view>
				</u-cell>
				<u-cell title="电话号码" v-if="(is_yz_mobile && add_action) || !is_yz_mobile">
					<view slot="value">
						<input v-model="driver_data.mobile" class="form-input" placeholder="电话号码"/>
					</view>
				</u-cell>
				<u-cell v-if="is_yz_mobile && add_action">
					<view slot="title">
						<input v-model="driver_data.code" class="yzm-input" placeholder="验证码"/>
					</view>
					<view slot="value">
						<u-code
							ref="uCode"
							@change="codeChange"
							@end="codeEnd"
							@start="codeStart"
							seconds="60"
							changeText="X秒重新获取"
						></u-code>
						<button	class="yzm-but"	@click="getCode">{{yzmText}}</button>
					</view>
				</u-cell>
				<u-cell  title="是否默认">
					<view slot="value">
						<u-switch v-model="driver_data.is_default" :activeColor="$s.theme" :activeValue="1" :inactiveValue="0"></u-switch>
					</view>
				</u-cell>
			</view>
			<view class="pop-foot">
				<button class="my-but-primary" @click="addDriverData()">{{add_action===true?'添加':'修改'}}</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name: 'drivers',
		props: {
			tenant:{
				type:[Object,Array],
				default:{}
			},
			isSelect:{
				type:[Boolean],
				default:true
			}
		},
		data() {
			return {
				name_title:'驾驶员',
				show_action:false,
				driver_list:[],
				drivers_pop:false,
				add_pop:false,
				add_action:true,
				form_label_width:80,
				driver_index:-1,
				driver_data: {			//当前赋值的驾驶人信息
					realname: '',
					mobile: '',
					id_code:'',
					is_default:0,
				},
				add_model:{				//添加驾驶人信息的模板
					realname: '',
					mobile: '',
					id_code:'',
					is_default:0,
				},
				is_yz_mobile:false,		//是否开启验证
				yzmText:'获取验证码',
				yzmStatus:false,
				// #ifdef MP-WEIXIN
				pop_height:"auto",
				// #endif
				// #ifdef MP-ALIPAY
				pop_height:"40vh",
				// #endif
			};
		},
		watch: {
		},
		computed: {
			...mapState({
				$config:state => state.$config,
				$s:state => state.$style,
				is_login:state => state.$isLogin,
				is_drive:state => state.$isDrive
			})
		},
		onReady(){
			this.getdriver_list()
			this.name_title=this.is_drive?'租客':'驾驶员'
		},
		mounted() {
			//判断是否开启手机验证
			if(this.$config.base.rent_binding===1){
				this.is_yz_mobile=true
			}
		},
		methods: {
			//选择驾驶人
			selectDrivers(){
				this.drivers_pop=true
			},
			//切换驾驶人修改窗口
			cutDriverPop(item=null){
				// 判断是否有登录
				if(!this.is_login && item===null){
					this.$c.error('请先登录','user/login/index')
					return false
				}
				
				if(item!=null){
					this.driver_data=item
					this.add_action=false
				}else{					
					this.driver_data=this.add_model
					this.add_action=true
				}
				this.drivers_pop=false
				this.add_pop=true
			},
			//添加修改驾驶人信息
			addDriverData(){
				if(!this.driver_data.realname){
					this.$c.info('请输入姓名')
				}else if(!this.driver_data.mobile || !uni.$u.test.mobile(this.driver_data.mobile)){
					this.$c.info('手机格式不正确')
				}else if(!this.driver_data.id_code || !uni.$u.test.idCard(this.driver_data.id_code)){
					this.$c.info('身份证号码格式不正确')
				}else{
					if(this.add_action){			//添加驾驶人
					
						if(this.is_yz_mobile){
							if(!this.yzmStatus){
								uni.$u.toast('请先获取验证码');
								return false
							}
							if(this.driver_data.code===""){
								uni.$u.toast('请输入验证码');
								return false
							}
						}
					
						this.$u.api.tenantAdd(this.driver_data).then(res=>{
							this.$c.success('添加成功')
							this.addUpOK(true)
						})
					}else{							//修改驾驶人
						this.$u.api.tenantUp(this.driver_data).then(res=>{
							this.$c.success('修改成功')
							this.addUpOK(false)
						})
					}
				}
			},
			//更新或者修改驾驶人信息后处理
			addUpOK(add=false){
				this.add_pop=false
				this.drivers_pop=true
				this.getdriver_list(add)
			},
			//删除租客信息
			deleteDriver(id){
				uni.showModal({
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮文字 
					title: '删除提示',
					content: '确定删除该信息吗?',
					confirmColor : this.$s.theme,
					success: res => {
						if (res.confirm) {
							this.$u.api.tanantDel({id:id}).then(res=>{
								this.$c.success('删除成功')
								this.addUpOK()
							})	
						}
					}
				});
				
			},
			//关闭编辑驾驶人弹窗
			closeDriverUpPop(){
				this.add_pop=false
				this.drivers_pop=true
				this.getdriver_list()
			},
			//选中驾驶人
			confirm(){
				if(this.driver_index>-1){
					this.drivers_pop=false
					this.$emit('confirm',this.driver_list[this.driver_index],this.driver_index)
				}else{
					this.$c.info('请先选择'+this.name_title)
				}
			},
			//加载驾驶人列表
			getdriver_list(type=false){			//type = true 为添加后的刷新
				var self=this
				this.$u.api.tenantList().then(res=>{
					this.driver_list=res.data.list
					if(type){
						self.driver_index=0
					}else{
						this.driver_list.forEach(function(val, index, arr){
							if(val.is_default===1){
								self.driver_index=index
							}
						});
					}
				})
			},
			//点击验证码
			getCode() {
				if(!uni.$u.test.mobile(this.driver_data.mobile)){
					uni.$u.toast('手机号码格式不正确！');
				}else{
					if (this.$refs.uCode.canGetCode) {
						uni.showLoading({
							title: '正在获取验证码'
						})
						this.$u.api.userSms({mobile:this.driver_data.mobile}).then(res=>{
							uni.hideLoading();
							if(res.status){
								//开启验证码状态
								this.yzmStatus=true
								// 这里此提示会被this.start()方法中的提示覆盖
								uni.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
							}else{
								uni.$u.toast(res.mgs);
							}
						})
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				}
			},
			//开始验证码
			codeStart(){
				
			},
			//验证码结束
			codeEnd(){
				
			},
			codeChange(text) {
				this.yzmText = text;
			},
		}
	};
</script>

<style lang="scss">
	
	.place-order-extra-drivers {
	    display: block;
	    margin: 0 32rpx 32rpx;
	    padding: 32rpx;
	    background: #fff;
	    border-radius: 20rpx;
	}
	
	.place-order-extra-drivers .drivers-header {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: center;
	    align-items: center;
	    background: url(../static/images/icon-arrow-right-black.png) right center no-repeat;
	    background-size: 30rpx auto;
	}
	
	/* 驾驶人样式 */
	.place-order-extra-drivers .drivers-header .title {
	    display: block;
	    font-weight: 700;
	    font-size: 30rpx;
		margin-right: 10rpx;
	}
	
	.place-order-extra-drivers .drivers-header .add {
	    display: block;
	    margin-left: auto;
	    padding-right: 30rpx;
	    font-size: 26rpx;
	    opacity: .6;
	}
	
	.place-order-extra-drivers .tips-content {
	    font-size: 24rpx;
	    opacity: .6;
	}
	
	.place-order-extra-drivers .row {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: center;
	    align-items: center;
	    padding: 25rpx 0;
	    border-bottom: 1px solid rgba(60,60,90,.05);
	}
	
	.place-order-extra-drivers .row .label {
	    display: block;
	    font-size: 26rpx;
	}
	
	.place-order-extra-drivers .row .desc {
	    display: block;
	    margin-right: 20rpx;
	    font-size: 22rpx;
	    opacity: .6;
	}
	
	.place-order-extra-drivers .row .value {
	    display: block;
	    font-size: 26rpx;
	}
	
	.place-order-extra-drivers .row .flex {
	    display: block;
	    flex: 1;
	    width: 100%;
	}
	
	.place-order-extra-drivers .row.amount {
	    margin-bottom: -20rpx;
	    border-bottom: none;
	}
	.driver-box{
		position: relative;
		z-index: 999999;
		background-color: #F3F4F6;
	}
	
	.driver-box .u-radio-group--row{
		flex-direction: column !important;
	}
	
	.driver-box .dr-hear{
		padding: 20rpx;
		text-align: center;
	}
	
	.driver-box .dr-foot{
		padding: 20rpx;
	}
	
	.driver-box .dr-foot .but-warning{
		font-size: 30rpx;
		line-height: 80rpx;
		height: 80rpx;
		color: #FFFFFF;
		background-color:var(--view-assist);
		width: 100%;
		border: 0;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
	}
	
	.driver-box .dr-form{
		padding: 30rpx 50rpx;
	}
	
	.driver-box .dr-list{
		width: 100%;
		height: 700rpx;
	}
	
	.driver-box .dr-item{
		background-color: #FFFFFF;
		margin: 30rpx;
		padding: 30rpx;
		border-radius: 15rpx;
		display: flex;
		flex-direction: row;	
	}
	
	.driver-box .dr-list .dr-item.in{
		border: 4rpx solid var(--view-theme);
	}
	
	.driver-box .dr-item .dr-radio{
		padding-top: 36rpx;
		width: 10%;
	}
	
	.driver-box .dr-item .dr-info{
		width:80%;
		color: #999999;
		font-size: 24rpx;
		align-items:flex-start;
		line-height: 40rpx;
		display: flex;
		flex-direction: column;
	}
	
	.driver-box .dr-item .info-name{
		font-weight: 700;
		color: #000000;
		font-size: 28rpx;
	}
	
	.driver-box .dr-item .dr-info .info-box view{
		display: flex;
		flex-direction: row;
	}
	
	.driver-box .dr-item .dr-info .info-box view view:first-child{
		width: 160rpx;
	}
	
	.driver-box .dr-item .dr-delete{
		display: flex;
		align-items:flex-start;
		justify-content: flex-end;
		width:10%;
	}
	
	.driver-box .dr-hear,.driver-box .dr-form,.driver-box .dr-foot{
		background-color: #FFFFFF;
	}
	
	.driver-box .dr-foot{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	
	.driver-box .dr-foot view{
		width: 45%;
		display:inline-flex;
	}
	
	.yzm-input{
		text-align: left;
	}
	
	.yzm-but{
		font-size: 14px;
		color: #FFFFFF;
		line-height: 60rpx;
		height: 60rpx;
		padding: 0rpx 20rpx;
		background-color: var(--view-theme);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		width: 220rpx;
	}
	.pop-box{
		background-color: #FFFFFF !important;
	}
	.no-select{
		display: block;
		margin-left: auto;
		padding-right: 30rpx;
		font-size: 26rpx;
		color: $u-tips-color;
	}
</style>
